<script setup>
// 百业攻略页面组件
// 用于展示各种游戏攻略文章
import { ref } from 'vue';

// 模拟攻略文章数据
const strategies = ref([
  {
    id: 1,
    title: "新手入门指南",
    author: "攻略达人",
    date: "2023-10-15",
    content: "这是一篇针对新手的入门攻略，帮助你快速了解游戏机制和基本操作...",
    category: "基础攻略"
  },
  {
    id: 2,
    title: "高级职业技巧",
    author: "职业大师",
    date: "2023-10-10",
    content: "深入探讨各职业的高级技巧和连招组合，提升你的战斗效率...",
    category: "职业攻略"
  },
  {
    id: 3,
    title: "副本通关全解析",
    author: "副本专家",
    date: "2023-10-05",
    content: "详细解析各大副本的通关技巧、BOSS机制和团队配合要点...",
    category: "副本攻略"
  }
]);
</script>

<template>
  <div class="header">
    <h2 class="section-title">百业攻略</h2>
    <p class="section-description">浏览各种游戏攻略文章，提升你的游戏体验</p>
  </div>
  <section id="strategies" class="strategies-section">

      <div class="content-layout">
        <!-- 左侧边栏 -->
        <div class="sidebar-left">
          <div class="user-profile">
            <img src="https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar1.avif" alt="用户头像" class="avatar">
            <div class="user-info">
              <h3 class="username">攻略达人</h3>
              <p class="user-desc">分享游戏攻略与技巧</p>
            </div>
          </div>
          <div class="nav-menu">
            <div class="nav-item active">
              <span class="nav-text">首页</span>
            </div>
            <div class="nav-item">
              <span class="nav-text">热门攻略</span>
            </div>
            <div class="nav-item">
              <span class="nav-text">最新发布</span>
            </div>
            <div class="nav-item">
              <span class="nav-text">收藏夹</span>
            </div>
          </div>
        </div>

        <!-- 中间内容区 -->
        <div class="main-content">
          <div class="category-filter">
            <button class="filter-btn active">全部攻略</button>
            <button class="filter-btn">基础攻略</button>
            <button class="filter-btn">职业攻略</button>
            <button class="filter-btn">副本攻略</button>
          </div>

          <div class="strategy-list">
            <div v-for="strategy in strategies" :key="strategy.id" class="strategy-card">
              <div class="card-header">
                <img :src="'https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar' + strategy.id + '.avif'" alt="作者头像" class="author-avatar">

                <div class="author-info">
                  <h3 class="author-name">{{ strategy.author }}</h3>
                  <div class="post-meta">
                    <span class="post-date">{{ strategy.date }}</span>
                    <span class="dot">·</span>
                    <span class="category-tag">{{ strategy.category }}</span>
                  </div>
                </div>
              </div>
              <h2 class="strategy-title">{{ strategy.title }}</h2>
              <p class="strategy-content">{{ strategy.content }}</p>
              <div class="card-footer">
                <div class="interaction-btn">
                  <span class="icon">👍</span>
                  <span class="count">128</span>
                </div>
                <div class="interaction-btn">
                  <span class="icon">💬</span>
                  <span class="count">32</span>
                </div>
                <div class="interaction-btn">
                  <span class="icon">🔄</span>
                  <span class="count">16</span>
                </div>
                <div class="interaction-btn">
                  <span class="icon">💗</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="sidebar-right">
          <div class="hot-topics">
            <h3 class="sidebar-title">热门话题</h3>
            <div class="topic-list">
              <div class="topic-item">
                <span class="topic-rank">1</span>
                <span class="topic-name">#新手入门指南#</span>
                <span class="topic-count">2.4万</span>
              </div>
              <div class="topic-item">
                <span class="topic-rank">2</span>
                <span class="topic-name">#职业平衡调整#</span>
                <span class="topic-count">1.8万</span>
              </div>
              <div class="topic-item">
                <span class="topic-rank">3</span>
                <span class="topic-name">#新副本攻略#</span>
                <span class="topic-count">1.5万</span>
              </div>
            </div>
          </div>

          <div class="recommended-authors">
            <h3 class="sidebar-title">推荐关注</h3>
            <div class="author-list">
              <div class="recommended-author">
                <img src="https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar4.avif" alt="推荐作者" class="author-avatar">
                <div class="author-info">
                  <h4 class="author-name">副本专家</h4>
                  <p class="author-desc">专注副本攻略分享</p>
                </div>
                <button class="follow-btn">关注</button>
              </div>
              <div class="recommended-author">
                <img src="https://gitee.com/tx-feng/FengHuaWuQue/raw/Vue/Static/player/avatar/avatar5.avif" alt="推荐作者" class="author-avatar">
                <div class="author-info">
                  <h4 class="author-name">职业大师</h4>
                  <p class="author-desc">各职业技巧详解</p>
                </div>
                <button class="follow-btn">关注</button>
              </div>
            </div>
          </div>
        </div>
      </div>
  </section>
</template>

<style scoped>
/* 全局样式 */
.strategies-section {
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  background-color: #1A202C;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  width: 100vw;
  min-width: 1920px;
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #e0e0e0;
  margin: 0;
}

.section-title {
  position: relative;
  font-size: 3rem;
  font-weight: 700;
  color: #2D3748;
  margin-bottom: 10px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #2D3748, #4A5568);
    border-radius: 2px;
}

.section-description {
  font-size: 1rem;
  color: #718096;
}

/* 内容布局 */
.content-layout {
  display: flex;
  gap: 20px;
}

/* 左侧边栏 */
.sidebar-left {
  width: 250px;
  background-color: #0c1724;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

.user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
  object-fit: cover;
  border: 2px solid #f0f0f0;
}

.user-info {
  text-align: center;
}

.username {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.user-desc {
  font-size: 0.9rem;
  color: #666;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nav-item {
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.nav-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
  font-weight: 500;
}

.nav-item:hover {
  background-color: #f5f5f5;
}

.nav-text {
  font-size: 0.95rem;
}

/* 中间内容区 */
.main-content {
  flex: 1;
  max-width: 600px;
}

.category-filter {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20px;
  overflow-x: auto;
  white-space: nowrap;
}

.filter-btn {
  padding: 6px 14px;
  background-color: transparent;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  margin-right: 10px;
}

.filter-btn.active {
  background-color: #1890ff;
  color: white;
}

.strategy-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.strategy-card {
  background-color: #0c1724;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.strategy-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.author-info {
  flex: 1;
}

.author-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.post-meta {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  color: #999;
}

.dot {
  margin: 0 5px;
}

.category-tag {
  background-color: #e6f7ff;
  color: #1890ff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
}

.strategy-title {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.strategy-content {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.interaction-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #999;
  cursor: pointer;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.interaction-btn:hover {
  color: #1890ff;
}

.icon {
  font-size: 1rem;
}

.count {
  font-size: 0.8rem;
}

/* 右侧边栏 */
.sidebar-right {
  width: 300px;
  background-color: #0c1724;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

.sidebar-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.topic-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

.topic-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topic-rank {
  width: 20px;
  height: 20px;
  background-color: #ff4d4f;
  color: white;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  font-weight: bold;
}

.topic-name {
  flex: 1;
  font-size: 0.9rem;
  color: #333;
  cursor: pointer;
}

.topic-name:hover {
  color: #1890ff;
}

.topic-count {
  font-size: 0.8rem;
  color: #999;
}

.author-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.recommended-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.follow-btn {
  padding: 4px 12px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.follow-btn:hover {
  background-color: #40a9ff;
}
</style>